<template>
  <div>
 <el-menu v-if=" user.role===1||user.role===2||user.role===3"
        style="min-height: calc(100vh - 50px)"
        default-active="path"
        router
        class="el-menu-vertical-demo"
    >
    <!--     <el-menu-item index="customer" v-if="user.role===1 ">
        <el-icon><goods /></el-icon>
        <template #title>商品</template>
      </el-menu-item>
      <el-menu-item index="cart" v-if="user.role===1 ">
        <el-icon><shopping-cart /></el-icon>
        <template #title>购物车</template>
      </el-menu-item>
      -->
      <el-menu-item index="users" v-if=" user.role===1||user.role===2">
        <el-icon><goods /></el-icon>
        <template #title>员工管理</template>
      </el-menu-item>
      <el-menu-item index="departments" v-if="user.role===1">
        <el-icon><list /></el-icon>
        <template #title>部门管理</template>
      </el-menu-item>
      <el-menu-item index="attendance" v-if="user.role===1">
        <el-icon><user-filled /></el-icon>
        <template #title>考勤管理</template>
      </el-menu-item>
      <el-menu-item index="/clock" v-if=" user.role===3||user.role===2||user.role===1">
        <el-icon><timer /></el-icon>
        <template #title>打卡</template>
      </el-menu-item> 
      
      <el-menu-item index="/position" v-if=" user.role===2||user.role===1">
        <el-icon><timer /></el-icon>
        <template #title>职位管理</template>
      </el-menu-item> 
      
      <el-menu-item index="/employeeleaves" v-if=" user.role===3||user.role===2||user.role===1">
        <el-icon><timer /></el-icon>
        <template #title>员工请假申请</template>
      </el-menu-item>
      
      <el-menu-item index="/leaves" v-if=" user.role===2||user.role===1">
        <el-icon><timer /></el-icon>
        <template #title>请假管理</template>
      </el-menu-item>
      <el-sub-menu index="1" v-if=" user.role===2||user.role===1" >

        <template #title>
            <el-icon><location /></el-icon>
            <span>统计分析</span>
          </template>

          <el-menu-item-group title="Group One">
            <el-menu-item index="/statistics">部门统计</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>



      <el-menu-item index="/allleaves" v-if=" user.role===2||user.role===1">
        <el-icon><timer /></el-icon>
        <template #title>统计分析</template>





      </el-menu-item>

    </el-sub-menu>
    </el-menu>
  </div>
</template> 

<script>

import { defineComponent, ref } from 'vue'
import {
    Location,
    Document,
    Menu as IconMenu,
    Setting,
    ShoppingCart,
    Goods,
    List,
    UserFilled,
    Timer
} from '@element-plus/icons-vue'

export default defineComponent({
  components: {
    Location,
    Document,
    Setting,
    IconMenu,
    ShoppingCart,
    Goods,
    List,
    UserFilled,
    Timer
  },
  data(){
    return {
      user:{},
      path:this.$route.path.substr(1)
    }
  },
  created() {
    let str = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(str)
  }
})
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>